<template>
  <div class="question-area">
    <span class="number" v-if="showNumber">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <span class="is-required" v-if="question.must"> * </span>
  </div>
  <div class="remark" v-if="question.remark">
    <span> {{ question.remark }} </span>
  </div>
  <div class="answer-area">
    <div class="degree">
      <span>{{ question.detail.degree_min }}</span>
      <div class="block">
        <el-rate v-model="answer" :colors="colors"> </el-rate>
      </div>
      <span>{{ question.detail.degree_max }}</span>
    </div>
    <!-- <el-slider
      v-model="answer"
      :step="1"
      show-stops
      :min="question.detail.start"
      :max="question.detail.start + question.detail.range - 1"
    >
    </el-slider> -->
  </div>
</template>

<script>
export default {
  props: {
    question: Object,
    number: Number,
    changeAnswers: Function,
    saveAnswer: Function,
    showNumber: Boolean,
  },
  data() {
    return {
      answer: 0,
      available: false,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },
  watch: {
    // 监听答案的变化
    // 并改变原来问卷中的答案部分
    answer: function(newVal) {
      if (this.available) {
        this.changeAnswers(this.number, newVal);
        if (this.saveAnswer) {
          console.log('grade')
          this.saveAnswer();
        }
      }
    },
  },
  created() {
    this.answer = this.question.grade
      ? this.question.grade
      : this.question.detail.start;
    this.available = true;
  },
};
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.is-required {
  background-size: 100%;
  vertical-align: -2px;
  font-size: 18px;
  color: red;
}

.answer-area {
  font-size: 14px;
}

.degree {
  display: flex;
  /* justify-content: space-between;
  margin-right: 70%; */
}
.block {
  margin-left: 10%;
  margin-right: 10%;
}
.remark {
  margin-bottom: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}
</style>
